import React from 'react';
import CountUp from 'react-countup';
import { useTranslation } from 'react-i18next';

interface AccountBalanceProps {
  loading: boolean;
  account: {
    balance: string;
    recharge_sum: string;
    recharge_count: number;
    recharge_pending_sum: string;
    recharge_pending_count: number;
  };
}

const AccountBalance: React.FC<AccountBalanceProps> = ({ loading, account }) => {
  const { t } = useTranslation();
  if (loading || !account) {
    return (
      <div className="m-0 mb-5 min-h-85 p-0 shadow-[0px_0px_16px_0px_rgba(0,0,0,0.03)] p-4 flex-1 flex flex-col justify-between">
        <div>{t('app.route.reload')}</div>
      </div>
    );
  }

  return (
    <div className="m-0 mb-5 min-h-85 p-0 shadow-[0px_0px_16px_0px_rgba(0,0,0,0.03)] p-4 flex-1 flex flex-col justify-between">
      <p>
        <span className="text-2xl text-blue-800 font-bold">{t('account_balance')}</span>
      </p>

      <div className="py-5 text-xl leading-7">
        <img 
          className="inline-block w-4 rounded-full align-middle" 
          src="https://wallex2.oss-cn-hangzhou.aliyuncs.com/asset/images/flags/us.png" 
          alt="USD Flag" 
        />
        <span className="inline-block px-1 align-middle text-sm text-gray-500">{t('currency.usd')}</span>
        <CountUp
          className="align-middle text-4xl font-bold"
          start={0}
          end={Number(account.balance)}
          duration={2}
          decimals={2}
          separator=","
          prefix="$"
        />
        <button className="float-right bg-blue-500 text-white px-4 py-2 rounded">
          {t('recharge_now')}
        </button>
      </div>

      <div className="clear-both mt-3 rounded-lg bg-gray-100 p-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-sm text-blue-800">
              {t('total_recharge_amount')}
            </p>
            <CountUp
              className="text-3xl font-bold"
              start={0}
              end={Number(account.recharge_sum)}
              duration={2}
              decimals={2}
              separator=","
              prefix="$"
            />
          </div>
          <div>
            <p className="text-sm text-blue-800">
              {t('total_recharge_count')}
            </p>
            <CountUp
              className="text-3xl font-bold"
              start={0}
              end={Number(account.recharge_count)}
              duration={2}
              decimals={0}
              separator=","
            />
          </div>
        </div>
      </div>

      <div className="mt-3 rounded-lg bg-gray-100 p-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-sm text-blue-600">
              {t('pending_recharge_amount')}
            </p>
            <CountUp
              className="text-3xl font-bold"
              start={0}
              end={Number(account.recharge_pending_sum)}
              duration={2}
              decimals={2}
              separator=","
              prefix="$"
            />
          </div>
          <div>
            <p className="text-sm text-blue-600">
              {t('pending_recharge_count')}
            </p>
            <CountUp
              className="text-3xl font-bold"
              start={0}
              end={Number(account.recharge_pending_count)}
              duration={2}
              decimals={0}
              separator=","
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AccountBalance;